<template>
  <div class="table-container">
    <div class="clear">
      <span @click="clear" style="margin: 0 8px">清空</span>
      <span @click="downloadAsImage" style="margin: 0 8px">导出</span>
    </div>
    <div id="content">
      <table class="clickable-table">
        <thead>
          <tr>
            <th width="60">编号</th>
            <th colspan="6">评价规则</th>
            <!-- <th width="60">备注</th> -->
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, rowIndex) in rows" :key="rowIndex">
            <td
              v-for="(cell, colIndex) in row"
              :key="colIndex"
              :rowspan="cell.rowspan || 1"
              :colspan="cell.colspan || 1"
              :class="{ highlight: isHighlighted(rowIndex, colIndex) }"
              @click="handleCellClick(rowIndex, colIndex)"
            >
              {{ cell.value }}
            </td>
          </tr>
        </tbody>
      </table>

      <div class="selection-info">
        <div class="info1">计算得出的级别:</div>
        <div class="info2" v-if="result">{{ result }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rows: [
        [
          { value: "1", rowspan: 1, colspan: 1 },
          { value: "粘接功能", rowspan: 1, colspan: 1 },
          { value: "密封1", rowspan: 1, colspan: 2 },
          { value: "粘接 2", rowspan: 1, colspan: 3 },
          // { value: '-', rowspan: 1, colspan: 1 }
        ],
        [
          { value: "2", rowspan: 1, colspan: 1 },
          { value: "粘接防护", rowspan: 1, colspan: 1 },
          { value: "附加防护措施 1", rowspan: 1, colspan: 2 },
          { value: "无附加防护措施 2", rowspan: 1, colspan: 3 },
          // { value: '-', rowspan: 1, colspan: 1 }
        ],
        [
          { value: "3", rowspan: 2, colspan: 1 },
          { value: "粘接位置", rowspan: 2, colspan: 1 },
          { value: "封闭/保护区域内容   1", rowspan: 2, colspan: 1 },
          { value: "封闭/保护区域外部  2", rowspan: 2, colspan: 1 },
          { value: "敞开/可自由进入的区域内部", rowspan: 1, colspan: 2 },
          { value: "敞开/可自由进入的区域外部   5", rowspan: 2, colspan: 1 },
          // { value: '-', rowspan: 2, colspan: 1 }
        ],
        [
          { value: "FO上方1.5m以内的位置    3", rowspan: 1, colspan: 1 },
          { value: "FO上方1.5m以上的位置  4", rowspan: 1, colspan: 1 },
        ],
        [
          { value: "4", rowspan: 1, colspan: 1 },
          { value: "粘接件的重量", rowspan: 1, colspan: 1 },
          { value: "小于1kg  1", rowspan: 1, colspan: 1 },
          { value: "小于 10kg 2", rowspan: 1, colspan: 1 },
          { value: "小于50KG   3", rowspan: 1, colspan: 2 },
          { value: "大于50KG  4", rowspan: 1, colspan: 1 },
          // { value: '-', rowspan: 1, colspan: 1 }
        ],
        [
          { value: "5", rowspan: 1, colspan: 1 },
          { value: "粘接失效后是否对人造成伤害", rowspan: 1, colspan: 1 },
          { value: "无伤害   1", rowspan: 1, colspan: 1 },
          { value: "伤害在1个月内消除  2", rowspan: 1, colspan: 1 },
          { value: "伤害在1个月内消除  3", rowspan: 1, colspan: 2 },
          { value: "永久性伤害或造成死亡 4", rowspan: 1, colspan: 1 },
          // { value: '-', rowspan: 1, colspan: 1 }
        ],
        [
          { value: "6", rowspan: 1, colspan: 1 },
          { value: "粘接失效后是否对车辆运行造成损害", rowspan: 1, colspan: 1 },
          { value: "无影响 1", rowspan: 1, colspan: 1 },
          { value: "轻微损害 2 ", rowspan: 1, colspan: 1 },
          { value: "影响安全运行   3", rowspan: 1, colspan: 2 },
          { value: "危害安全运行   4", rowspan: 1, colspan: 1 },
          // { value: '-', rowspan: 1, colspan: 1 }
        ],
      ],
      currentHighlight: null,
      clickedCells: [],
      result: "",
      showResult: false,
    };
  },
  methods: {
    getCellIndex(rowIndex, colIndex) {
      let index = 0;
      for (let i = 0; i < rowIndex; i++) {
        for (let j = 0; j < this.rows[i].length; j++) {
          index += this.rows[i][j].colspan;
        }
      }
      for (let j = 0; j < colIndex; j++) {
        index += this.rows[rowIndex][j].colspan;
      }
      return index;
    },
    isHighlighted(rowIndex, colIndex) {
      const index = this.getCellIndex(rowIndex, colIndex);
      return this.clickedCells.includes(index);
    },
    handleCellClick(rowIndex, colIndex) {
      if (rowIndex != 3 && (colIndex == 0 || colIndex == 1)) return; //编号·评价规则说明·|| colIndex == 6 备注·不可点击
      // if ((rowIndex == 0 || rowIndex == 1) && colIndex == 4) return //第一行第二行备注不可点击
      // console.log('点击的行索引:', rowIndex);
      // console.log('点击的列索引:', colIndex);
      const index = this.getCellIndex(rowIndex, colIndex);
      // console.log('计算得到的索引:', index);
      // 处理第三行和第四行合并选择逻辑
      const isRow3or4 = rowIndex === 2 || rowIndex === 3;
      if (isRow3or4) {
        const row3or4Indices = [];
        for (let i = 2; i <= 3; i++) {
          for (let j = 0; j < this.rows[i].length; j++) {
            const index = this.getCellIndex(i, j);
            row3or4Indices.push(index);
          }
        }
        this.clickedCells = this.clickedCells.filter(
          (index) => !row3or4Indices.includes(index)
        );
      } else {
        // 处理其他行一行只能选一个的逻辑
        const existingIndexInRow = this.clickedCells.findIndex((index) => {
          let totalCols = 0;
          for (let i = 0; i < this.rows.length; i++) {
            let rowCols = 0;
            for (let j = 0; j < this.rows[i].length; j++) {
              rowCols += this.rows[i][j].colspan;
            }
            if (index < totalCols + rowCols) {
              return i === rowIndex;
            }
            totalCols += rowCols;
          }
          return false;
        });
        if (existingIndexInRow !== -1) {
          this.clickedCells.splice(existingIndexInRow, 1);
        }
      }
      if (this.clickedCells.includes(index)) {
        const indexInArray = this.clickedCells.indexOf(index);
        this.clickedCells.splice(indexInArray, 1);
      } else {
        this.clickedCells.push(index);
      }
      if (rowIndex > 4) {
        this.calculateResult();
      }
    },
    calculateResult() {
      const row5 = this.rows[5];
      const row6 = this.rows[6];
      let value5 = "";
      let value6 = "";
      for (let i = 0; i < row5.length; i++) {
        const index5 = this.getCellIndex(5, i);
        if (this.clickedCells.includes(index5)) {
          value5 = row5[i].value;
          break;
        }
      }
      for (let i = 0; i < row6.length; i++) {
        const index6 = this.getCellIndex(6, i);
        if (this.clickedCells.includes(index6)) {
          value6 = row6[i].value;
          break;
        }
      }
      if (
        value5.includes("永久性伤害或造成死亡") ||
        value6.includes("危害安全运行")
      ) {
        this.result = "A1";
      } else if (value5.includes("无伤害") && value6.includes("轻微损害")) {
        this.result = "A3";
      } else if (value5.includes("无伤害") && value6.includes("无影响")) {
        this.result = "Z";
      } else {
        this.result = "A2";
      }
      this.showResult = true;
    },
    clear() {
      this.clickedCells = [];
      this.result = "";
      this.showResult = false;
    },
    downloadAsImage() {
      const content = document.getElementById("content");
      // 使用 html2canvas 将内容转换为 canvas
      html2canvas(content).then((canvas) => {
        // 将 canvas 转换为图片数据
        const imgData = canvas.toDataURL("image/png");
        // 创建一个 <a> 标签用于下载
        const link = document.createElement("a");
        link.href = imgData;
        link.download = "page-screenshot.png"; // 下载文件名
        link.click(); // 触发下载
      });
    },
  },
};
</script>

<style scoped>
.table-container {
  width: 100%;
  height: 100%;
  padding: 25px;
}

.clickable-table th {
  background: #ffe6e6;
}
.clear {
  width: 100%;
  text-align: end;
  color: #409eff;
  margin: 5px 0;
  cursor: pointer;
}

.clickable-table {
  width: 100%;
  border-collapse: collapse;
}

.clickable-table th,
.clickable-table td {
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 15px 8px;
  text-align: center;
  font-weight: 400;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}

.highlight {
  background: #fff4f4;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #cd1418;
  color: #cd1418 !important;
}

.selection-info {
  width: 100%;
  height: 60px;
  background: #fff4f4;
  border-radius: 0px 0px 0px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
}
.info1 {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 20px;
  color: rgba(0, 0, 0, 0.85);
  line-height: 23px;
  letter-spacing: 1px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.info2 {
  padding: 10px;
  height: 28px;
  background: #fff1f0;
  border-radius: 2px 2px 2px 2px;
  border: 2px solid #cd1418;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #cd1418;
}
</style>
